import React, { useEffect, useState } from 'react'
import { Action, SearchForm, TableCard } from "components";
import { Table, Select, Input, Button, message, Tag, Popconfirm, DatePicker  } from 'antd';
import { getManageCardLogs ,getManageCard} from "./service";
const ManagementCard = () => {

  const [cardList,setCardList] = useState([])
  useEffect(() => {
    Getdata(SearchParams);
    getManageCard().then(({ data })=>{
      console.log(data)
      let arr = []
      arr = data.map((item) => {
       return {
        label: item.card_name,
        value: item.card_number
       }
      })
      setCardList(arr)
    })
  }, []);



  const [dataSource, setDataSource] = useState([]);

  const [isFetching, setIsFetching] = useState(false);

  const [Total, setTotal] = useState(0);

  const [SearchParams, setSearchParams] = useState({
    current: 1,
    pageSize: 10,
    card_id: "",
    card_number: "",
    holder_name: "",
    start_time: "",
    end_time: ""
  });

  const Getdata = (Params) => {
    setIsFetching(true);
    getManageCardLogs(Params).then(({ data }) => {

      if (!data.list.length) return setIsFetching(false);
      console.log(data)
      setDataSource(data.list)
      setTotal(data.total)
      setIsFetching(false);
    });
  };


  return (
    <div>

      <SearchForm>
        {/* <SearchForm.Item span={8} title="管理卡编号">
          <Input allowClear placeholder="请输入" onChange={(e) => {
            console.log(e.target.value)
            Getdata({ ...SearchParams, card_number: e.target.value })
            setSearchParams({ ...SearchParams, card_number: e.target.value })
          }} />
        </SearchForm.Item> */}
        <SearchForm.Item span={8} title="卡号">
          <Input allowClear placeholder="请输入" onChange={(e) => {
            console.log(e.target.value)
            Getdata({ ...SearchParams, card_id: e.target.value })
            setSearchParams({ ...SearchParams, card_id: e.target.value })
          }} />
        </SearchForm.Item>
        <SearchForm.Item span={8} title="持卡人">
          <Input allowClear placeholder="请输入" onChange={(e) => {
            console.log(e.target.value)
            Getdata({ ...SearchParams, holder_name: e.target.value })
            setSearchParams({ ...SearchParams, holder_name: e.target.value })
          }} />
        </SearchForm.Item>
        <SearchForm.Item span={8} title="卡类型">
          <Select allowClear placeholder="请选择"

            options={cardList}
            onChange={(value) => {
              console.log("选中->",value)
              Getdata({ ...SearchParams, card_number: value })
              setSearchParams({ ...SearchParams, card_number: value })
            
            }}></Select>
        </SearchForm.Item>


        <SearchForm.Item span={8} title="开始时间">
          <DatePicker
            placeholder="请选择"
            showTime
            format={"YYYY-MM-DD HH:mm:ss"}
            onChange={(value, dateString) => {
              console.log(dateString)

              Getdata({ ...SearchParams, start_time: dateString })
              setSearchParams({ ...SearchParams, start_time: dateString })
            }}
          />

        </SearchForm.Item>

        <SearchForm.Item span={8} title="结束时间">
          <DatePicker
            placeholder="请选择"
            showTime
            format={"YYYY-MM-DD HH:mm:ss"}
            onChange={(value, dateString) => {
              console.log(value)
              Getdata({ ...SearchParams, end_time: dateString })
              setSearchParams({ ...SearchParams, end_time: dateString })
            }}
          />
        </SearchForm.Item>
      </SearchForm>


      <TableCard
        loading={isFetching}
        rowKey="id"
        dataSource={dataSource}
        onReload={Getdata}



        pagination={{
          showSizeChanger: true,
          showLessItems: true,
          showTotal: total => `共 ${Total} 条`,
          total: Total,
          current: SearchParams.page,
          pageSizeOptions: ['10', '20', '50', '100']
        }}
      >
        <Table.Column title="卡片名称" dataIndex="card_name" />
        <Table.Column title="卡片ID" dataIndex="card_id" />
        <Table.Column title="挂失编号" dataIndex="loss_number" />
        <Table.Column title="持卡人" dataIndex="holder_name" />
        <Table.Column title="是否挂失" dataIndex="status" render={(text) => (
          <>
            {text === false ? <Tag color="red">挂失</Tag> : <Tag color="green">正常</Tag>}
          </>

        )} />
        <Table.Column title="有效期" dataIndex="validity" />
        <Table.Column title="发卡时间" dataIndex="created_at" />
        <Table.Column title="发卡人" dataIndex="created_by" />
        <Table.Column title="备注" dataIndex="description" />

      </TableCard>
    </div>
  )
}

export default ManagementCard